<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:06
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:03:52
 * @FilePath: \i-hos-app\shared\emr\src\views\editer\Sidebar.vue
 * @Description: 电子病历主体编辑侧边栏配置
-->
<template>
  <el-tabs class="emr_tabs" v-model="asideTabsActive">
    <el-tab-pane label="属性" name="attr">
      <EmrAsideAttr />
    </el-tab-pane>
    <el-tab-pane label="数据结构" name="data">
      <JsonList />
    </el-tab-pane>
    <el-tab-pane label="知识体系" name="system">
      <KbsList @setKbs="getKbsConfig" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'
  // 接口约束
  import { IPageConfigStore } from '../../interface/page'
  import { ISetType, ISetConfigType } from '../../interface/set'

  // 组件引入
  import EmrAsideAttr from '../../components/common/EmrAsideAttr.vue'
  import KbsList from '../../components/common/kbsList.vue'
  import JsonList from '../../components/common/JsonList.vue'

  // 电子病历侧栏配置数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据
  const configStore: IPageConfigStore = usePageConfigStore()
  const { asideTabsActive } = toRefs(configStore) // tabs选中的状态名字

  // 定义向父组件传值的事件
  const $emit = defineEmits<{
    (e: 'toFatherConfig', type: string, flag: ISetType | ISetConfigType, val?: any): void
  }>()
  // 操作知识库向编辑器插入对应元素
  const getKbsConfig = (type: string, flag: ISetType, val: any): void => {
    $emit('toFatherConfig', type, flag, val)
  }
</script>

<style lang="scss" scoped>
  .emr_tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    :deep(.el-tree) {
      width: 100%;
      background: transparent;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 10px;
  }
  .el-empty {
    margin: 0 auto;
  }
</style>
